<template>
  <p>point = {{ point }}</p>
  <span class="point" :style="{left: point.x+'px',top: point.y+'px'}">
    {{ point.x }},{{ point.y }}
  </span>
</template>

<script>
import usePoint from "./hooks/usePoint";

export default {
  name: "Demo",
  setup() {
    // 使用自定义hook
    const point = usePoint()

    return {point}
  }
}
</script>

<style scoped>
.point {
  position: fixed;
  display: inline-block;
  border-radius: 50%;
  width: 100px;
  height: 50px;
  color: white;
  line-height: 50px;
  background-color: #2c3e50;
}
</style>